<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom )+'px'}">
		<navbar title="隐私设置"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="item-box">
				<view class="item">
					<view class="item-label">
						是否显示全名
					</view>
					<view class="item-switch">
						<van-switch :checked="info.isName" size="20" @change="switchChange('isName')" active-color="#0181ff" inactive-color="#dedede" :active-value="1" :inactive-value="0" />
					</view>
				</view>
				<view class="item">
					<view class="item-label">
						是否显示学校
					</view>
					<view class="item-switch">
						<van-switch :checked="info.isSchool" size="20" @change="switchChange('isSchool')" active-color="#0181ff" inactive-color="#dedede" :active-value="1" :inactive-value="0" />
					</view>
				</view>
				<view class="item">
					<view class="item-label">
						是否显示专业
					</view>
					<view class="item-switch">
						<van-switch :checked="info.isMajor" size="20" @change="switchChange('isMajor')" active-color="#0181ff" inactive-color="#dedede" :active-value="1" :inactive-value="0" />
					</view>
				</view>
				<!-- <view class="item">
					<view class="item-label">
						是否允许评价
					</view>
					<view class="item-switch">
						<van-switch :checked="info.isComment" size="20" @change="switchChange('isComment')" active-color="#0181ff" inactive-color="#dedede" :active-value="1" :inactive-value="0" />
					</view>
				</view> -->
				<view class="item">
					<view class="item-label">
						是否显示评价
					</view>
					<view class="item-switch">
						<van-switch :checked="info.isShowComment" size="20" @change="switchChange('isShowComment')" active-color="#0181ff" inactive-color="#dedede" :active-value="1" :inactive-value="0" />
					</view>
				</view>
				<view class="item">
					<view class="item-label">
						是否关闭求职信息
					</view>
					<view class="item-switch">
						<van-switch :checked="info.isQiuzhi" size="20" @change="switchChange('isQiuzhi')" active-color="#0181ff" inactive-color="#dedede" :active-value="0" :inactive-value="1" />
					</view>
				</view>
			</view>
		</view>
		<view class="main-bj">

		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {updatePrivacy} from "@/core/web-api/qiuzhiduan.js"
	export default {
		data() {
			return {
				info: {
					isComment: '0',
					isMajor: '0',
					isName: '0',
					isQiuzhi: '0',
					isSchool: '0',
					isShowComment: '0'
				},
				isOver:true,
			}
		},
		methods: {
			/**
			 * 切换
			 * @param {Object} type
			 */
			switchChange(type) {
				this.submit(type);
			},
			
			/**
			 * 提交
			 */
			submit(type){
				if(!this.isOver){
					uni.showToast({
						title:"请求频率过快，请稍后！",
						icon:"none"
					})
				}
				this.isOver = false;
				this.info[type] = this.info[type]==1? 0:1;
				updatePrivacy(this.info).then(res=>{
					if(res.code==20000){
						this.isOver = true;
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
						this.info[type] = this.info[type]==1? 0:1;
					}
				})
			},

			// 获取个人信息
			getUserInfo() {
				this.$store.dispatch("getUserInfoAction")
			},
			
			/**
			 * 赋值
			 * @param {Object} info
			 */
			setInfo(info){
				for(let key in this.info){
					this.info[key] = info[key]
				}
			}
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['userInfo'])
		},
		watch: {
			userInfo: {
				deep: true,
				immediate: true,
				handler(info) {
					if (!info || Object.keys(info).length == 0) return;
					this.setInfo(info);
				},
			}
		},
		components: {
			Navbar
		},
		created() {
			this.getUserInfo();
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}

	.item {
		width: 100%;
		background-color: #fff;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 10upx;
		margin-bottom: 10upx;
		display: flex;
		align-items: center;
		box-shadow: 12upx 0 28upx rgba(202, 206, 216, .35);

		&-box {
			width: 100%;
			margin-top: 40upx;
		}

		&-label {
			flex: 1;
			font-size: 30upx;
			color: #000000;
		}
	}
</style>